<template>
    <div>
        <div v-if="isMobile" ref="ganttxx" class="gantt-container"/>
        <van-calendar
            title="日历"
            :poppable="false"
            v-model:show="canlenShow"
            :show-confirm="false"
            :min-date="minDate"
            :max-date="maxDate"	
            :style="{ height: '500px' }"
            :formatter="formatter"
            >
            <text slot="top-info"> 看看 </text>
        </van-calendar>
        <van-button type="primary"
                    ref="butt"
                    icon="search"
                    zise="mini"
                    :text="buttonText"
                    :loading="loading"
                    @click="setImg"
                    color="linear-gradient(to right, #ff6034, #ee0a24)"
                    loading-text="loading..." />
    </div>
</template>

<script>
    import { ref, getCurrentInstance, computed, onMounted, reactive } from 'vue'
    import { useStore } from 'vuex'
    import gantt from 'dhtmlx-gantt'  // 引入模块
    import 'dhtmlx-gantt/codebase/skins/dhtmlxgantt_terrace.css' //皮肤
    import moment from 'moment'
    // import 'dhtmlx-gantt/codebase/locale/locale_cn'  // 本地化
    // import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_tooltip.js' //任务条悬浮提示
    export default {
        setup () {
            const { getters, dispatch } = useStore()
            const ganttxx = ref(null)
            const butt = ref(null)
            let img = computed(()=>getters['User/getRandomImg'])
            let loading = ref(false)
            const tasks = reactive({       
                data: [
                { id: 1, text: "广告位 #1", start_date: "15-01-2021", owner: "张总", duration: 10, progress: 0.6 },
                { id: 2, text: "广告位 #2", start_date: "9-01-2021", owner: "李总", duration: 20, progress: 0.4 },
                { id: 3, text: "广告位 #2-1", start_date: "02-01-2021", owner: "赵总", duration: 38, progress: 0.4, parent: 2 },
                 { id: 4, text: "广告位 #3", start_date: "17-01-2021", owner: "赵总", duration: 25, progress: 0.7 },
                { id: 5, text: "广告位 #4", start_date: "12-01-2021", owner: "吴总", duration: 28, progress: 0.3 },
                ],
                
                links: [{ id: 1, source: 1, target: 3, type: "0" }],
      
            })
            let isMobile = ref(true)
            let canlenShow = ref(true)
            let calenData = reactive({})
            let buttonText = ref('1')
            const setImg = async () => {
                loading.value = true
                console.log('ganttxx', ganttxx.value)
                let res = await dispatch('User/setRandomImg')
                loading.value = false
                buttonText.value = res
            }
            onMounted(()=>{                
                console.log('甘特图', ganttxx.value)
                 //本地化
                gantt.i18n.setLocale("cn");
                gantt.config.autosize = false
                //只读模式
                gantt.config.readonly = true
                //是否显示左侧树表格
                gantt.config.show_grid = true
                gantt.config.columns.push({
                    name: "owner",
                    label: "负责人",
                    align: "center"
                });
                //   初始化
                gantt.init(ganttxx.value)
                gantt.parse(tasks)
                const db = $mapp.database()
                let _  = db.command
                let date_list = []
                db.collection("adroom").where({
                    startTime: _.gte(1642608000000).and(_.lte(1643040000000)) }) // 日期范围
                    .get().then(
                     (res)=>{  
                         calenData = res                          
                         console.log("数据库ff成功", calenData.data); 
                         calenData.data.forEach((value, index, array)=>{
                             let start_day = new Date(value['startTime']).getMonth()+1 + '-' + new Date(value['startTime']).getDate();
                             let end_day = new Date(value['endTime']).getMonth()+1 + '-' + new Date(value['endTime']).getDate() 
                             let day_name = value['姓名']
                             let ad_name = value['广告位名称']
                             console.log('Key and value', start_day, end_day, day_name, ad_name)
                             date_list.push({
                                 start_day, end_day, day_name, ad_name
                             })
                         })
                         console.log('jiegouti', date_list) 
                         }
                )  
            } )
            const currentInstance = getCurrentInstance()
            const { $mapp } = currentInstance.appContext.config.globalProperties
            const formatter = (day) => {
                console.log('kkk', day )
                const month = day.date.getMonth() + 1;
                const date = day.date.getDate();

                if (month === 2) {
                    if (date === 1) {
                    day.topInfo = '劳动节';
                    day.bottomInfo = '广告'
                    } else if (date === 4) {
                    day.topInfo = '青年节';
                    } else if (date === 11) {
                    day.text = '今天';
                    }
                }

                if (day.type === 'start') {
                    day.bottomInfo = '入住';
                } else if (day.type === 'end') {
                    day.bottomInfo = '离店';
                }

                return day;
                };
                let mmday = moment(1642608000000).format("dddd, MMMM Do YYYY, h:mm:ss a");
                let eeday = moment(1643040000000).format("dddd, MMMM Do YYYY, h:mm:ss a");
                console.log('moment', mmday, '\n end=>', eeday)


            return {
                img,
                loading,
                setImg,
                ganttxx,
                tasks,
                minDate: new Date(2022,0,1),
                maxDate: new Date(2022, 2, 31),
                canlenShow,
                isMobile,
                calenData,
                formatter,
                buttonText
            }
        },
    }
</script>
